<template>
  <k-view class="stock-radio-tabs">
    <k-view
      :class="['tab-item', modelValue == tab.index ? 'theme-bg-white' : 'bg-bar']"
      v-for="tab in radioTabList"
      :key="tab.index"
      @click="changeTab(tab)"
    >
      <k-text
        :class="[
          'tab-item-text',
          modelValue == tab.index ? 'active' : '',
          modelValue == tab.index ? 'theme-text-title' : 'theme-text-content',
        ]"
        >{{ tab.name }}</k-text
      >
    </k-view>
  </k-view>
</template>

<script>
export default {
  props: {
    // 选中的tab的index
    modelValue: {
      type: Number,
      default: 1,
    },
    radioTabList: {
      type: Array,
      default: [],
    },
  },
  methods: {
    changeTab(tab) {
      this.$emit('change', tab.index);
    },
  },
};
</script>

<style lang="less">
.stock-radio-tabs {
  margin: 0 auto 24px;
  width: fit-content;
  background-color: #f5f5f5;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;

  .tab-item {
    padding: 8px 24px 4px;
  }

  .theme-bg-white {
    background-color: #ffffff;
    border-radius: 8px;
  }

  .theme-text-title {
    font-size: 28px;
    color: #262626;
  }

  .theme-text-content {
    color: #595959;
    font-size: 28px;
  }
}

[theme-mode='black'] {
  .stock-radio-tabs {
    background-color: rgba(255, 255, 255, 0.06);

    .theme-bg-white {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .theme-text-title {
      color: rgba(255, 255, 255, 0.84);
    }

    .theme-text-content {
      color: rgba(255, 255, 255, 0.6);
    }
  }
}
</style>
